<template>
     <div>
     <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
     <editor
       api-key="ma8jmtx2fcy65iclogfvxmxpqrdaqug4w7zkqgaa3n767eaz"
       :init="{
         height: 500,
         menubar: false,
         language_url:'@/assets/zh_CN.js',
         plugins: [
           'advlist autolink lists link image charmap print preview anchor',
           'searchreplace visualblocks code fullscreen',
           'insertdatetime media table paste code help wordcount',
           'kityformula-editor'
         ],
         toolbar:
           'undo redo | formatselect | bold italic backcolor | \
           alignleft aligncenter alignright alignjustify | \
           bullist numlist outdent indent | removeformat | help | kityformula-editor'
       }"
     />
   </div>
  </template>
  <script>
   import Editor from '@tinymce/tinymce-vue'
  
  export default {
    components: {
      Editor
    },
    props: {
      value: {
        type: String,
        default: ""
      },
      disabled: {
        type: Boolean,
        default: false
      },
      plugins: {
        type: [String, Array],
        default:
          "link lists image code table wordcounts"
      },
      toolbar: {
        type: [String, Array],
        default:
          "bold italic underline strikethrough | fontsizeselect fontselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink code | removeformat"
      }
    },
    data() {
      return {
        
        myValue: this.value,
        editor:''
      };
    },
    mounted() {
      tinymce.init({})
      .then((editors) => {
    this.editor = editors[0];
  });
  
    },
    beforeDestroy() {
    this.editor.destroy();
},
    methods: {
      calcWidth() {
        return document.body.clientWidth / 2 + "px";
      },
    },
    watch: {
      value(newValue) {
        this.myValue = newValue;
      },
      myValue(newValue) {
        this.$emit("input", newValue);
      }
    }
  };
  </script>
  
  